<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
    <transition>
        <div style="pointer-events: auto;">
            <!--<img class="bgimg" src='@/assets/img/raw_1536733888.png'/>-->
            <div class="efomo-main-box">
                <div class="efomo-main-content">
                    <h5 class="efomo-h5">{{$t('m.efomo.invite.tit')}} <span
                            @click="aShowTip({id:'7',explainShow:true})">?</span></h5>
                    <template v-show="fomoInfo.name != ''">
                        <div v-if="fomoInfo.name != ''">
                            <div class="efomo-main-qrcode">
                                <!--<img src="@/assets/img/qrcode/v2_puf2hg.png" alt="">-->
                                <canvas id="canvas-fomo-invite"></canvas>
                            </div>
                            <div class="efomo-main-btn efomo-invite-btn">
                                <button v-clipboard:copy="fomoInfo.name"
                                        v-clipboard:success="doClipboard"
                                        v-clipboard:error="">
                                    <span>{{ fomoInfo.name }}</span>
                                </button>
                            </div>
                        </div>
                        <div v-else class="noMore-code">
                            {{$t('m.efomo.invite.sub')}}
                        </div>
                        <div class="efomo-introduction">
                            <h5>{{$t('m.efomo.document.tit')[6]}}</h5>
                            <p>
                                {{$t('m.efomo.document.content')[19]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[20]}}
                            </p>
                        </div>
                    </template>

                </div>
            </div>
            <Alert_little></Alert_little>
        </div>
    </transition>
</template>

<script>
    import '@/assets/css/efomo.scss'
    import QRCode from 'qrcode';

    export default {
        name: "efomo_invite",
        data() {
            return {
                pathName: 'invite',
                showPullingDown: false,
            }
        },
        mounted() {
            // 设置title
            this.$parent.title = this.$t('m.efomo.title')[4];
            this.$parent.init();
        },
        methods: {
            async init() {
                this.showQrcode();
            },

            changeTab(url, path) { //路由跳转
                this.active = path;
                this.changeRoute(url);
            },
            doClipboard: function () { //复制回调方法
                this.aAlert_little({
                    msg: this.$t('m.wallet.qrcode.prompt[1]'),
                    top: "220px"
                })
            },
            showQrcode: function () {
                if (this.fomoInfo.name == "") return;
                let canvas = document.querySelector('#canvas-fomo-invite');
                QRCode.toCanvas(canvas, this.fomoInfo.name, {
                    width: 198,
                    margin: 1
                }, function (error) {
                    if (error)
                        console.log(error)
                })
            },
        }
    }
</script>

<style lang="scss">
    .create-line {
        margin: .1rem;
        display: block;
    }
</style>